<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <div v-if="data" v-html="data"></div>
            <div v-if="loading" class="loading-message">加载中...</div>
            <div v-if="error" class="error-message">{{ error }}</div>
        </div>
    </div>        
</template>
<script setup lang="ts" name="docManage">
import { doc } from '/@/api/doc/index';
import { useMessageBox } from '/@/hooks/message';

const data = ref();
const loading = ref(false);
const error = ref('');

onMounted(async () => {
    try {
        loading.value = true;
        error.value = '';
        const res = await doc();
        console.log('文档加载成功:', res);
        data.value = res?.data|res;
    } catch (err) {
        console.error('文档加载失败:', err);
        error.value = '文档加载失败，请稍后重试';
        useMessageBox().error('文档加载失败');
    } finally {
        loading.value = false;
    }
});
</script>
<style scoped>
.loading-message {
    color: #666;
    padding: 20px;
    text-align: center;
}
.error-message {
    color: #f56c6c;
    padding: 20px;
    text-align: center;
}

/* 列表项间距设置 */
div li {
  margin-bottom: 1em;  /* 垂直间距 */
  padding-left: 0.5em; /* 左侧缩进 */
}

/* 基础链接样式 */
a {
  color: #0066cc;      /* 标准蓝色 */
  text-decoration: underline;
 /* text-decoration-color: currentColor;  同步文本颜色 */
}

/* 悬停交互效果 */
a:hover {
  text-decoration-thickness: 2px; /* 加粗下划线 */
  color: #004499;      /* 深蓝色 */
}
</style>